<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">


    <head jsf:id="ssss">
        <title>SOCIOS CJAVA</title>
        <link rel="Shortcut Icon" 
              href="#{request.contextPath}/resources/images/world.png" type="image/x-icon" />
        <ui:include src="./pages/imports/library.xhtml"/>
    </head>
    <body jsf:id="bodyz">

        <pe:layout widgetVar="fplayout" >

            <!-- CABEZERA DEL MENU -->
            <pe:layoutPane position="north" spacingOpen="0" 
                           resizable="false" minSize="200px" closable="false"
                           styleClassContent="layout-header">

                <ui:include src="./pages/imports/header_template.xhtml"/>

            </pe:layoutPane>

            <!-- CONTENEDOR DEL MENU -->
            <pe:layoutPane position="west" spacingOpen="0" spacingClosed="8"  
                           id="layoutWestId" > 
                <f:facet name="header" >

                    <form jsf:id="sdfsdf">
                        <p:commandLink onclick="PF('fplayout').close('west')" style="alignment-adjust: inherit;"
                                       styleClass="fa fa-mail-reply-all">
                            Menú Principal
                        </p:commandLink>
                        
                    </form>
                </f:facet>
                <p:outputPanel deferred="true" style="background: transparent;">
                    <div style="width: 100%;height: 100%;background: transparent;">
                        <div id="wrap"> 
                            <div id="main"> 
                                <ui:include src="#{navigationBean.navigationMenu}"/>

                            </div>

                        </div>
                        <p:separator/><br/>
                        <div id="footer"> 
                            <br/>
                            <p>CopyRight: CJava Perú</p>
                            <p:separator/>
                        </div>

                    </div>


                </p:outputPanel>
            </pe:layoutPane>  
            <!-- CENTRO, DONDE ESTA EL CONTENIDO -->
            <pe:layoutPane position="center" closable="true" id="centerPanel" >
                <p:outputPanel id="panelPrincipalId" deferred="true">
                    <ui:include src="#{navigationBean.navigationContent}"/>
                </p:outputPanel>
            </pe:layoutPane>  
        </pe:layout>  

        <!-- para la carga del contenido -->
        <pe:blockUI target="panelPrincipalId" widgetVar="blockUI">  
            <h:panelGrid columns="2">  
                <h:graphicImage value="/resources/images/ajax-loader.gif" 
                                style="margin-right: 12px; vertical-align: middle;"/>  
                <h:outputText value="Cargando Contenido..." style="white-space: nowrap;"/>  
            </h:panelGrid>  
        </pe:blockUI>   

        <!-- se activa si existe evento ajax -->
        <ui:insert name="status">
            <p:ajaxStatus
                style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
                <f:facet name="start">
                    <p:graphicImage value="/resources/images/loading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
        </ui:insert>

        <!-- GROWL O MENSAJE GLOBAL -->
        <p:growl autoUpdate="true" id="growlId" />

        <!-- TOOL TIP GLOBAL -->
        <pe:tooltip global="true" atPosition="right center"
                    myPosition="top left" adjustX="-3" adjustY="-3"/>

        <!-- PARA QUE VUALVA A ACCEDAR A LA APLICACIÓN SI ESTA EXPIRA -->
        <h:form>
            <!-- SOLO SERA POR 30MIN -->
            <p:idleMonitor onactive="sessionTimeOutDialog.show();"
                           timeout="14400000" />

            <p:dialog header="Sesion Caducada..." widgetVar="sessionTimeOutDialog"
                      modal="true" closable="false" visible="false" width="200">
                <div align="center">
                    La sesion a caducada, por favor pulse sobre el siguiente botón para volver a acceder a la aplicación
                    <br/>
                </div>
                <input id="confirmBackToLogin" type="button"
                       value="VUAELVA A ACCEDER AL SISTEMA"
                       onclick="window.location = '#{request.contextPath}/login.jsf';" />
            </p:dialog>
        </h:form>
        
        <h:outputScript library="primefaces" name="charts/charts.js" />
    </body>
</html>
